<template>
  <el-dialog title="考勤记录详情" v-model="dialogVisible" width="600px" append-to-body>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="记录编号">
        {{ record?.recordId }}
      </el-descriptions-item>
      <el-descriptions-item label="员工ID">
        {{ record?.employeeId }}
      </el-descriptions-item>
      <el-descriptions-item label="员工姓名">
        {{ record?.employeeName }}
      </el-descriptions-item>
      <el-descriptions-item label="考勤日期">
        {{ record?.attendanceDate }}
      </el-descriptions-item>
      <el-descriptions-item label="上班打卡时间">
        {{ formatDateTime(record?.clockInTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="上班打卡地点">
        {{ record?.clockInAddress || "无" }}
      </el-descriptions-item>
      <el-descriptions-item label="下班打卡时间">
        {{ formatDateTime(record?.clockOutTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="下班打卡地点">
        {{ record?.clockOutAddress || "无" }}
      </el-descriptions-item>
      <el-descriptions-item label="考勤状态">
        <el-tag :type="getStatusType(record?.status)">
          {{ getStatusLabel(record?.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="考勤规则ID">
        {{ record?.ruleId }}
      </el-descriptions-item>
      <el-descriptions-item label="考勤规则">
        {{ record?.ruleName || "无" }}
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        {{ record?.remark || "无" }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatDateTime(record?.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="更新时间">
        {{ formatDateTime(record?.updateTime) }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { AttendanceRecordVO } from "@/types/attendance/record";
import { STATUS_LABEL_MAP, STATUS_TYPE_MAP, AttendanceStatus } from "@/types/attendance/record";

const props = defineProps<{
  record?: AttendanceRecordVO;
  modelValue: boolean;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});

// 获取考勤状态标签
const getStatusLabel = (status?: AttendanceStatus) => {
  if (status === undefined) return "未知";
  return STATUS_LABEL_MAP[status] || "未知";
};

// 获取考勤状态类型
const getStatusType = (status?: AttendanceStatus): "success" | "warning" | "danger" | "info" => {
  if (status === undefined) return "info";
  return STATUS_TYPE_MAP[status] || "info";
};

// 格式化日期时间
const formatDateTime = (dateTimeStr?: string) => {
  if (!dateTimeStr) return "-";
  try {
    // 将ISO字符串转换为本地日期时间格式
    const date = new Date(dateTimeStr);
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
      hour12: false
    });
  } catch (e) {
    console.error("日期格式化错误:", e);
    return dateTimeStr;
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
  padding-top: 20px;
  margin-right: 16px;
}
</style>
